<script setup>
import img1 from "@/Img/img/knowlege/10.png";
import img2 from "@/Img/img/knowlege/11.png";
import img3 from "@/Img/img/knowlege/12.png";
import img5 from "@/Img/img/knowlege/13.png";
import img6 from "@/Img/img/knowlege/14.png";
import img7 from "@/Img/img/knowlege/15.png";
import img8 from "@/Img/img/knowlege/16.png";
import { ref, computed } from "vue";
import HeadComponents from "@/components/headComponents.vue";

// 数据源：模拟从 API 获取的疾病数据
const diseases = ref([
  {
    name: "普通感冒",
    symptoms: ["常见症状：鼻塞、流涕、咳嗽、喉咙痛"],
    treatments: [],
    image: img1
  },
  {
    name: "糖尿病",
    symptoms: ["常见症状：多饮、多食、多尿、体重下降"],
    treatments: ["建议治疗：饮食控制、药物治疗、定期监测"],
    image:img2
  },
  {
    name: "高血压",
    symptoms: ["常见症状：头痛、头晕、心悸、视力模糊"],
    treatments: ["建议治疗：低盐饮食、规律运动、药物治疗"],
    image: img3
  },
  {
    name: "心脏病",
    symptoms: [
      "常见症状：头晕、乏力、活动耐力明显下降、心慌、心悸，严重时血压下降"
    ],
    treatments: ["建议治疗：药物、介入、手术"],
    image: img2
  },
  {
    name: "白血病",
    symptoms: ["常见症状：牙龈出血、鼻出血"],
    treatments: ["建议治疗：药物治疗；化疗：就是化学治疗"],
    image: img5
  },
  {
    name: "肝硬化",
    symptoms: [
      "常见症状：皮肤色泽改变，表现为黝黑、灰暗、皮肤没有光泽、毛细血管扩张"
    ],
    treatments: ["建议治疗：药物、介入、手术"],
    image: img2
  },
  {
    name: "结核病",
    symptoms: [
      "常见症状：头晕、乏力、活动耐力明显下降、心慌、心悸，严重时血压下降"
    ],
    treatments: ["建议治疗：一般支持疗法，抗纤维化的治疗，并发症的治疗"],
    image: img6
  },
  {
    name: "肠胃炎",
    symptoms: ["常见症状：呕吐、腹泻、腹部痛"],
    treatments: ["建议治疗：药物治疗、饮食调整和休息"],
    image: img7
  },
  {
    name: "恶性肿瘤",
    symptoms: [
      "常见症状：疼痛；恶心、呕吐；食欲减退（或厌食）；便秘；发热；口腔溃疡；腹泻；腹胀；褥疮；抑郁、焦虑和睡眠障碍"
    ],
    treatments: [
      "建议治疗：放疗、介入治疗和化疗来减轻症状、控制肿瘤进展，并延长患者的生存时间"
    ],
    image:img8
  }
]);

// 搜索功能
const searchQuery = ref("");

const filteredDiseases = computed(() => {
  if (!searchQuery.value.trim()) return diseases.value;

  const query = searchQuery.value.toLowerCase();
  return diseases.value.filter(
      (item) =>
          item.name.toLowerCase().includes(query) ||
          item.symptoms.some((s) => s.includes(query)) ||
          item.treatments.some((t) => t.includes(query))
  );
});
</script>

<template>
  <div id="main-container">
    <!-- 表头 -->
    <head-components />

    <el-container style="padding: 2rem;">
      <el-main>
        <!-- 搜索区域 -->
        <div class="search-box">
          <el-input v-model="searchQuery" placeholder="输入疾病名称进行搜索..." clearable>
            <template #prefix>
              <i class="el-icon-search"></i>
            </template>
          </el-input>
        </div>

        <!-- 疾病卡片网格 -->
        <div class="medical-grid">
          <el-card
              v-for="(item, index) in filteredDiseases"
              :key="index"
              class="disease-card"
              shadow="hover"
          >
            <img :src="item.image" alt="" class="disease-image" />
            <div class="disease-info">
              <h3>{{ item.name }}</h3>
              <p v-for="(symptom, i) in item.symptoms" :key="i">{{ symptom }}</p>
              <p v-for="(treatment, j) in item.treatments" :key="j" class="treatment">
                {{ treatment }}
              </p>
            </div>
          </el-card>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<style >
@import '@/assets/base.css';
.container {
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  position: relative;

}
</style>